<template>
  <el-row type="flex">
    <el-col span="17" style="padding-right: 20px;">
      <el-form-item label="二级标题：">
        <el-input v-model="secondTitle" clearable></el-input>
      </el-form-item>
      <el-form-item 
        label="参数内容："
        :prop="proptext + '.' + index + '.document'"
        :rules="[
          { required: true, message: '字段参数内容必填项', trigger: 'blur' }
        ]"
        >
        <el-input v-model="document" type="textarea" :rows="4" resize="none" clearable></el-input>
      </el-form-item>
    </el-col>
    <el-col span="7" style="display: flex;">
      <UploadImage accept=".png" :limit="1" direction="row" height="150" width="280" :file-list.sync="arrayImage" @success="(response) => (image = response.filePathName)" @delete="() => (image = '')"/>
      <div style="height: 150px;display: flex;align-items:center;font-size: 24px;cursor: pointer;">
        <i class="el-icon-circle-plus addicon" style="margin-right: 2px;" @click="add"></i>
        <el-button style="padding: 0;height: auto;border: 0;font-size: 25px" :disabled="data.length === 1" @click="remove">
          <i class="el-icon-remove removeicon"></i>
        </el-button>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import UploadImage from '@/components/UploadImage'
export default {
  components: {
    UploadImage
  },
  props: {
    index: {
      type: [Number, String],
      required: true
    },
    item: {
      type: Object,
      default() {
        return {}
      }
    },
    proptext: String,
    data: {
      type: Array,
      default() {
        return []
      }
    }
  },
  computed: {
    secondTitle: {
      get() {
        return this.item.second_title
      },
      set(val) {
        let arr = this.data.filter((_, index) => index !== this.index).map(item => item.second_title)
        if(arr.includes(val)) {
          this.$message.error(`一级标题${this.item.first_title || ''}下的二级标题${val}存在相同数据！`)
        } else {
          this.$emit('update', {index: this.index, data: {second_title: val}})
        }
      }
    },
    document: {
      get() {
        return this.item.document
      },
      set(val) {
        this.$emit('update', {index: this.index, data: {document: val}})
      }
    },
    image: {
      get() {
        return this.item.image
      },
      set(val) {
        this.$emit('update', {index: this.index, data: {image: val}})
      }
    },
    arrayImage() {
      return this.item.image ? [this.item.image] : []
    }
  },
  methods: {
    add() {
      this.$emit('add', this.index)
    },
    remove() {
      this.$emit('remove', this.index)
    }
  }
}
</script>

<style lang="scss">
.parameter .el-form .el-form-item__content, 
.parameter .el-form .el-form-item__label {
  height: auto !important;
}
.parameter .addicon {
  color: #6c7e59;
  &:hover {
    color: #a5af99;
  }
}
.parameter .removeicon {
  color: #B75646;
  &:hover {
    color: #cb9289;
  }
}
</style>